<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>用户管理</el-breadcrumb-item>
			<el-breadcrumb-item>用户列表</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 卡片展示区域 -->
		<el-card class="box-card" shadow="always">
			<!-- 搜索 -->
			<el-row :gutter="20">
				<el-col :span="6">
					<el-input v-model="queryInfo.query" placeholder="请输入内容,enter" clearable @clear="getUserData"
						@keyup.enter.native="getUserData">
						<el-button @click="getUserData" slot="append" icon="el-icon-search"></el-button>
					</el-input>
				</el-col>
				<el-col :span="4">
					<el-button type="primary" @click="addDiologVisible = true">添加用户</el-button>
				</el-col>
			</el-row>
			<!-- 用户列表区 -->
			<el-table class="userData" :data="userData" stripe border style="width: 100%" max-height="350">
				<el-table-column fixed type="index" label="#"> </el-table-column>
				<el-table-column fixed prop="id" label="Id" width="60">
				</el-table-column>
				<el-table-column fixed prop="user_id" label="姓名" width="100">
				</el-table-column>
				<el-table-column prop="nickname" label="昵称" width="120">
				</el-table-column>
				<el-table-column prop="sex" label="性别" width="60">
				</el-table-column>
				<el-table-column prop="Introduction" label="简介" width="100">
				</el-table-column>
				<el-table-column prop="imgurl" label="头像" width="80">
					<template slot-scope="scope">
						<el-image style="width: 40px; height: 40px;margin-left: 10px;" :src="scope.row.img_url"
							:preview-src-list="[scope.row.img_url]">
						</el-image>
					</template>
				</el-table-column>
				<el-table-column label="添加时间" :formatter="formataddtime">
				</el-table-column>
				<el-table-column prop="IsSuperAdmin" label="是否超级管理员" width="100">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.IsSuperAdmin" active-color="#13ce66" inactive-color="#ff4949" disabled
							active-value="true" inactive-value="false"
							>
						</el-switch>
					</template>
				</el-table-column>
				<el-table-column prop="IsAdmin" label="是否管理员" width="80">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.IsAdmin" active-color="#13ce66" inactive-color="#ff4949"
							active-value="true" inactive-value="false" disabled
							>
						</el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="120">
					<template slot-scope="scope">
						<el-tooltip class="item" :enterable="false" effect="dark" content="删除该用户" placement="top">
							<el-button type="danger" size="mini" icon="el-icon-delete" @click="delUsers(scope.row.id)">
							</el-button>
						</el-tooltip>
						<el-tooltip class="item" :enterable="false" effect="dark" content="编辑该用户" placement="top">
							<el-button type="success" @click="editUsers(scope.row)" size="mini" icon="el-icon-edit">
							</el-button>
						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页器 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="queryInfo.pageNum" :page-sizes="pagesizedetail"
				layout="total, sizes, prev, pager, next, jumper" :page-size="queryInfo.pagesize" :total="total">
			</el-pagination>
		</el-card>

		<!-- 添加用户对话框 -->
		<el-dialog title="添加用户" :visible.sync="addDiologVisible" width="40%" @close="addDiologClose">
			<el-form :model="AddForm" :rules="AddRules" ref="AddForm" :show-message="true" label-width="70px"
				size="small">
				<el-form-item label="姓名" prop="Name">
					<el-input v-model="AddForm.Name" placeholder="请输入用户姓名"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="AddForm.password" placeholder="请输入密码"></el-input>
				</el-form-item>
				<el-form-item label="性别" prop="sex">
					<el-switch style="display: block;margin: 8px 0 0 20px;width: 100px;" v-model="AddForm.sex"
						active-color="#13ce66" inactive-color="#ffb9d8" active-text="男" inactive-text="女">
					</el-switch>
				</el-form-item>
				<el-form-item label="昵称" prop="nickname">
					<el-input v-model="AddForm.nickname" placeholder="请输入昵称"></el-input>
				</el-form-item>
				<el-form-item label="超级管理员" prop="IsSuperAdmin">
					<el-switch style="display: block;margin: 8px 0 0 20px;width: 100px;" v-model="AddForm.IsSuperAdmin"
						active-color="#13ce66" inactive-color="#ffb9d8" active-text="是" inactive-text="否">
					</el-switch>
				</el-form-item>
				<el-form-item label="管理员" prop="IsAdmin">
					<el-switch style="display: block;margin: 8px 0 0 20px;width: 100px;" v-model="AddForm.IsAdmin"
						active-color="#13ce66" inactive-color="#ffb9d8" active-text="是" inactive-text="否">
					</el-switch>
				</el-form-item>
				<el-form-item label="简介" prop="Introduction">
					<el-input v-model="AddForm.Introduction" placeholder="简介"></el-input>
				</el-form-item>
				<el-form-item label="头像" prop="img_url">
					<el-input v-model="AddForm.img_url" placeholder="头像"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addDiologVisible = false">取 消</el-button>
				<el-button type="primary" @click="addUser">确 定</el-button>
			</div>
		</el-dialog>

		<!-- 修改用户对话框 -->
		<el-dialog title="修改用户" :visible.sync="editdialogVisible" @close="editDilogClose" width="40%">
			<el-form :model="EditForm" ref="EditForm" :rules="AddRules"  :show-message="true" label-width="70px"
				size="small">
				<el-form-item label="姓名" prop="Name">
					<el-input v-model="EditForm.Name" placeholder="请输入用户姓名"></el-input>
				</el-form-item>
				<el-form-item label="性别" prop="sex">
					<el-switch style="display: block;margin: 8px 0 0 20px;width: 100px;" v-model="EditForm.sex"
						active-color="#13ce66" inactive-color="#ffb9d8" active-text="男" inactive-text="女">
					</el-switch>
				</el-form-item>
				<el-form-item label="昵称" prop="nickname">
					<el-input v-model="EditForm.nickname" placeholder="请输入昵称"></el-input>
				</el-form-item>
				<el-form-item label="超级管理员" prop="IsSuperAdmin">
					<el-switch style="display: block;margin: 8px 0 0 20px;width: 100px;" v-model="EditForm.IsSuperAdmin"
						active-color="#13ce66" inactive-color="#ffb9d8" active-text="是" inactive-text="否">
					</el-switch>
				</el-form-item>
				<el-form-item label="管理员" prop="IsAdmin">
					<el-switch style="display: block;margin: 8px 0 0 20px;width: 100px;" v-model="EditForm.IsAdmin"
						active-color="#13ce66" inactive-color="#ffb9d8" active-text="是" inactive-text="否">
					</el-switch>
				</el-form-item>
				<el-form-item label="简介" prop="Introduction">
					<el-input v-model="EditForm.Introduction" placeholder="简介"></el-input>
				</el-form-item>
				<el-form-item label="头像" prop="img_url">
					<el-input v-model="EditForm.img_url" placeholder="头像"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="editdialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="changeUser">确 定</el-button>
			</div>
		</el-dialog>

		<div class="one">
			<el-divider content-position="center" @click="Hitokoto">{{this.hitokoto}}</el-divider>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'userlist',
		data() {
			return {
				//用户列表
				pagesizedetail: [4, 6, 10],
				userData: [],
				queryInfo: {
					//查询关键字
					query: '',
					//当前页数
					pageNum: 1,
					// 每页数据大小
					pagesize: 4
				},
				//数据条数
				total: 0,
				//是否添加用户对话框
				addDiologVisible: false,
				//是否编辑用户对话框
				editdialogVisible: false,
				//验证规则
				AddRules: {
					Name: [{
							required: true,
							message: '请输入姓名',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 14,
							message: '长度在 2 到 14 个字符',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 14,
							message: '长度在 6 到 14 个字符',
							trigger: 'blur'
						}
					],
					nickname: [{
							required: true,
							message: '请输入昵称',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 14,
							message: '长度在 2 到 14 个字符',
							trigger: 'blur'
						}
					]
				},
				//添加用户表单
				AddForm: {
					password: '',
					Name: '',
					sex: '男',
					age: 18,
					nickname: '',
					IsSuperAdmin: '否',
					IsAdmin: "否",
					img_url: '',
					Introduction: ''
				},
				EditForm: {
					id:-1,
					Name: '',
					sex: false,
					nickname: '',
					IsSuperAdmin: false,
					IsAdmin: false,
					img_url: '',
					Introduction: ''
				},
				hitokoto: ""
			}
		},
		created() {
			this.getUserData()
			this.Hitokoto()
		},
		methods: {
			formataddtime(row, column) {
				var d = new Date(row.create_time);
				var m = d.getMinutes();
				var s = d.getSeconds();
				m = checkTime(m);
				s = checkTime(s);

				function checkTime(i) {
					if (i < 10) {
						i = "0" + i
					}
					return i
				}
				return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + m +
					':' + s;
			},
			async Hitokoto() {
				let {
					data: res
				} = await this.$http.get("https://v1.hitokoto.cn/?c=d");
				this.hitokoto = res.hitokoto
			},
			async getUserData() {
				if (this.queryInfo.query !== '') {
					this.queryInfo.pageNum = 1;
					this.queryInfo.pagesize = 4;
					this.pagesizedetail = [4]
				} else {
					this.pagesizedetail = [4, 6, 10]
				}
				this.get()
			},
			//监听pagesize改变事件
			async handleSizeChange(sizes) {
				this.queryInfo.pagesize = sizes;
				this.get()
			},
			//监听页码值改变时间
			async handleCurrentChange(sizes) {
				this.queryInfo.pageNum = sizes;
				this.get()
			},
			async get() {
				let {
					data: res
				} = await this.$http.get(
					`/api/users/userinfo?number=${this.queryInfo.pageNum}&size=${this.queryInfo.pagesize}&query=${this.queryInfo.query}&type=search`
				);
				this.userData = res.data;
				this.total = res.number;
			},
			//监听用户对话框关闭
			addDiologClose() {
				this.$refs.AddForm.resetFields()
			},
			editDilogClose() {
				this.$refs.EditForm.resetFields()
			},
			//对话框添加用户按钮确认(ok)
			addUser() {
				this.$refs.AddForm.validate(async valid => {
					if (!valid) {
						this.$message.error('必填项未填')
						this.addDiologVisible = false;
					} else {
						//发起请求
						if(this.AddForm.IsSuperAdmin){
							if(!this.AddForm.IsAdmin){
								return this.$message.error("超级管理员必是管理员,请选中")
							}
						}
						let {
							data: res
						} = await this.$http.post("/api/users/addUser", this.AddForm);
						if (res.code == "500") {
							this.$message.error(res.text)
						} else {
							this.$message.success(res.text)
						}
						this.addDiologVisible = false;
						this.getUserData();
					}
				})
			},
			//删除事件(ok)
			delUsers(Id) {
				this.$confirm('此操作将删除该学生信息, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					let {
						data: res
					} = await this.$http.post("/api/users/delUsers", {
						Id: Id
					});
					this.$message({
						type: 'success',
						message: res.text
					});
					this.getUserData()
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//编辑用户(ok)
			editUsers(data) {
				this.editdialogVisible = true;
				this.EditForm.id = data.id;
				this.EditForm.Name = data.user_id;
				this.EditForm.nickname = data.nickname;
				this.EditForm.img_url = data.img_url;
				this.EditForm.Introduction = data.Introduction;
				this.EditForm.sex = data.sex == "男"?true:false;
				this.EditForm.IsSuperAdmin = data.IsSuperAdmin =="true"?true:false;
				this.EditForm.IsAdmin = data.IsAdmin=="true"?true:false;
			},
			//修改(ok)
			changeUser() {
				if(this.EditForm.IsSuperAdmin){
					if(!this.EditForm.IsAdmin){
						return this.$message.error("超级管理员必是管理员,请选中")
					}
				}
				this.$refs.EditForm.validate(async valid => {
					if (!valid) {
						this.$message.error('必填项未填')
						this.editdialogVisible = false;
					} else {
						// 发起请求
						let {
							data: res
						} = await this.$http.post("/api/users/editUsers", this.EditForm);
						if (res.code == "201") {
							this.$message.success(res.text);
							this.getUserData();
							this.editdialogVisible = false;
						} else {
							this.$message.error("更改信息失败")
						}
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.box-card {
		width: calc(99% - 64px);
		min-height: 480px;
		margin: 25px 0 0 20px;
		position: relative;
		left: 50%;
		transform: translate(-52%);

		.userData {
			margin-top: 10px;
			text-align: center;
		}

		.el-pagination {
			margin-top: 10px;
		}

		.el-pagination__jump {
			line-height: 28px;
		}
	}

	.avatar-uploader {
		display: flex;
		width: 200px;
		height: 40px;
		line-height: 40px;
		justify-content: space-between;
		justify-items: center;

		span {
			display: inline-block;
		}
	}
</style>
